<template>
  <div class="detailWrap">
    <div class="money-box">
      <span class="month">{{month}}</span>
      <span class="money">总计：{{money}}元</span>
    </div>

    <div class="detail-con">
      <div class="detail-box" v-for="(item,index) in salaryList" :key="item" v-if="item">
        <span class="title1">{{item.split(":")[0]}}：</span><span class="title2">{{item.split(":")[1]}}</span>
      </div>
    </div>

    <back-page @backPage="back"></back-page>
  </div>
</template>

<script>
  import {toDecimal} from "../../common/js/util"
  import backPage from "../../components/backpage"

  export default {
    data() {
      return {
        salaryList: [],
        month: "",
        money: "",
        currentMonth: ""
      }
    },
    mounted() {
      this.currentMonth = this.$route.query.month;
      let month = this.$route.query.month;
      if (month != '' && month != null) {
        this.month = month.substr(0, 4) + "年" + month.substr(5, 2) + "月"
      }
      let num = this.$route.query.totalMoney;
      if (num != "" && num != null) {
        this.money = toDecimal(num);
      }
      let salary = this.$route.query.salary;
      this.salaryList = salary.split(";");
    },
    methods:{
      back(){
        this.$router.push({path: "/wage", query: {"month": this.currentMonth}});
      }
    },
    components: {
      backPage
    }
  }
</script>

<style lang="stylus" scoped>
  .detailWrap
    width: 100%
    height: 100%
    background: rgba(242, 242, 242, 1)
    .money-box
      display: flex
      align-items: center
      margin-bottom: 0.267rem
      width: 100%
      height: 1.6rem
      background: rgba(255, 255, 255, 1)
      .month
        margin-left: 0.32rem
        font-size: 0.427rem
        font-weight: 500
        color: rgba(51, 51, 51, 1)
      .money
        margin-left: auto
        margin-right: 0.32rem
        font-size: 0.4rem
        font-weight: bold
        color: rgba(60, 175, 255, 1)
    .detail-con
      width: 100%
      height: auto
      background: rgba(255, 255, 255, 1)
      .detail-box
        display: flex
        align-items: center
        justify-content: space-between
        margin: 0 auto
        width: 93.6%
        height: 1.106666rem
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
        &:last-child
          border-bottom: none
        .title1
          font-size: 0.386666rem
          color: #3CAFFF
        .title2
          color: #1B1B1B
          font-size: 0.386666rem
</style>
